<template>
  <textarea ref="code-container" v-bind:value="value"></textarea>
</template>

<script>
  import CodeMirror from 'codemirror'
  import 'codemirror/mode/xml/xml.js';
  import 'codemirror/addon/hint/xml-hint.js';
  import 'codemirror/lib/codemirror.css';
  import 'codemirror/theme/material.css';

  let coder = CodeMirror.EditorFromTextArea

  export default {
    name: "XmlCodeMirror",
    props: {
      value: {
        type: String,
        require: true
      },
      readOnly: {
        type: Boolean,
        default: true
      }
    },
    mounted() {
        if (!coder) {
          coder = CodeMirror.fromTextArea(
            this.$refs['code-container'],
            {
              lineWrapping: true,
              mode: 'application/xml', // HMTL混合模式
              lineNumbers: true, // 是否显示行号
              lint: true, // 是否高亮显示代码
              theme: 'material', // 主题，需要配合上方 import 的 css
              readOnly: this.readOnly // 是否只读
            },
          );
          coder.setSize('100%', '100%');
        } else {
          coder.setValue(this.xml);
        }
    }
  }
</script>
